<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Minimal working example</title>
</head>
<body>
    <ul id="events"></ul>

    <script src="/socket.io/socket.io.js"></script>
    <script>
        const $events = document.getElementById('events');

        const newItem = (content) => {
          const item = document.createElement('li');
          item.innerText = content;
          return item;
        };

        const socket = io();

        socket.on('connect', () => {
            $events.appendChild(newItem('connect'));
        });

        socket.on('hello', (counter) => {
            $events.appendChild(newItem(`hello - ${counter}`));
            if (counter == 10) {
                socket.emit("hi", "gan gan gan!");
            }
        });

        let counter = 0;
        setInterval(() => {
            ++counter;
            socket.emit('hey', { counter }); // the object will be serialized for you
        }, 1000);
    </script>
</body>
</html>